<template>
	<view class="content">
		<view class="uni-login">
		    <img class="uni-image" src="/static/duck.png" alt="">
		    <navigator url="/pages/login/login" open-type="navigate" >点击登录</navigator>
		</view>
		
		<view class="uni-matter" bindtap="clickMatterFun">
		    <uni-icons class="content" type="contact" size="24"></uni-icons>
		    <text>待办事项</text>
		    <uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		
		<view class="btns">
			<uni-tag text="全部" @click="bindClick"></uni-tag>
			<uni-tag text="作业" @click="bindClick"></uni-tag>
			<uni-tag text="通知" @click="bindClick"></uni-tag>
			<uni-tag text="打卡" @click="bindClick"></uni-tag>
			<uni-tag text="成绩" @click="bindClick"></uni-tag>
		</view>
		
		<view class="today">
			<view class="title">今日</view>
			<view class="system">
				<img class="uni-image" src="/static/duck.png" alt="">
				<view class="text">
					<text class="text1">系统消息</text><br>
					<text class="text2">4月11日 12:24</text>
				</view>
			</view>
			<view class="tag">
				<uni-tag class="systemtag" text="#系统消息" type="" @click="bindClick"></uni-tag>
				<uni-tag class="alltag" text="#ALL" @click="bindClick"></uni-tag>
			</view>
			<!-- 欢迎使用教育小程序 -->
			<view class="van-font">
				<view class="van-icon"></view>
				<text class="van-text1">欢迎使用教育小程序</text>
				<text class="van-text2">为了让家长更加真切地了解孩子在学校的表现，让家长积极地投入到我们的教育教学当中来，增进家长与学校的感情；并且</text>
				<text class="van-text3">显示全部</text>
			</view>
			<view class="van-show">
				<svg t="1658907740438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3146" width="200" height="200"><path d="M352.898 618.523C327.316 641.806 293.316 656 256 656c-79.529 0-144-64.471-144-144s64.471-144 144-144c37.082 0 70.89 14.017 96.416 37.04L583 252.479c-4.544-14.008-7-28.956-7-44.478 0-79.529 64.471-144 144-144s144 64.471 144 144-64.471 144-144 144c-38.01 0-72.58-14.726-98.315-38.785l-229.507 151.85C397.248 479.778 400 495.568 400 512c0 16.204-2.677 31.783-7.612 46.32l230.714 151.157C648.684 686.194 682.684 672 720 672c79.529 0 144 64.471 144 144s-64.471 144-144 144-144-64.471-144-144c0-16.204 2.677-31.783 7.612-46.32L352.898 618.524z" fill="#5090F1" p-id="3147"></path><path d="M720 280c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72zM720 888c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72zM256 584c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72z" fill="#FFFFFF" p-id="3148"></path></svg>
				<text class="van-text4">分享</text>
				<text class="van-text5">已读 35/35</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	/* 用户登录 */
	.uni-login {
		background: white;
		height: 140rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	/* 头像 */
	.uni-image {
		height: 100rpx;
	}
	/* 点击登录 */
	.uni-login navigator {
		color: #5664f0;
		margin-left: 40rpx;
		font-weight: 500;
	}
	
	/* 待办事项 */
	.uni-matter {
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
	}	
	/* 字体图标样式 */
	.content {
		margin-right: 20rpx;
	}
	.arrowright { 
		float: right;
		margin-top: 5rpx;
	}
	/* 标签跳转 */
	.btns {
		
		margin-top:	15rpx;
		margin-bottom: 30rpx;
		height: 100rpx;
		background: white;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.uni-tag {
		display: flex;
		align-items: center;
		justify-content: center;
		color: black !important;
		width: 100rpx !important;
		height: 50rpx !important;
		font-size: 24rpx !important;
		padding: 0 !important;
		background-color: #eaeaea !important;
		border: none !important;
	}
	/* 鼠标滑过跳转标签 */
	.uni-tag :hover {
		color: blue !important;
	}
	
	/* 今日分享 */
	.today {
		height: 500rpx;
		background-color: #fff;
		padding-top: 5rpx;
	}
	.title {
		font-weight: 900;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
	}
	/* 系统消息时间 */
	.system {
		margin-left: 30rpx;
		height: 100rpx;
	}
	.text {
		display: inline-block;
		height: 100rpx;
		position: relative;
		margin-left: 20rpx;
	}
	.text1 {
		position: absolute;
		top: -28rpx;	
	}
	.text2 {
		font-size: 20rpx;
		color: #a09f9e;
	}
	/* 系统下的tag */
	.tag {
		margin-left: 30rpx;
		margin-top: 20rpx;
		height: 30rpx;
		display: flex;
		width: 260rpx;
		justify-content: space-around;
		background-color: #fff;
		margin-bottom: 60rpx;
	}
	.systemtag {
		background-color: #df7454 !important;
		width: 120rpx !important;
		color: #fff !important;
		border: none !important;
	}
	.alltag {
		background-color: #8f9bfa !important;
		width: 120rpx !important;
		color: #fff !important;
		border: none !important;
	}
	/* 欢迎使用教育小程序 */
	.van-font {
		position: relative;
		
	}
	.van-icon {
		width: 15rpx;
		height: 15rpx;
		border-radius: 7.5rpx;
		background-color: #6878f8;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
		
	}
	.van-text1 {
		display: block;
		font-size: 30rpx;
		font-weight: 800;
		position: absolute;
		top: -15rpx;
		left: 40rpx;	
	}
	.van-text2 {
		display: block;
		margin-left: 30rpx;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 20rpx;
		color: #a09f9e;
	}
	.van-text3 {
		display: block;
		margin-left: 39rpx;
		margin-bottom: 10rpx;
		color: #a09f9e;
		font-size: 14rpx;
	}
	/* 分享已读 */
	.van-show {
		height: 60rpx;
		line-height: 60rpx;
		background-color: white;
		border-top: 1px dashed #bbbbbb;
		position: relative;
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 30rpx;
		top: 10rpx;
	}
	.van-text4 {
		margin-left: 80rpx;
		color: #70706e;
	}
	.van-text5 {
		margin-left: 400rpx;
		color: #70706e;
	}
		
	</style>
